<template>
  <div>
    <div class="title">
      <h3>优惠券管理</h3>
    </div>

    <div class="btnBox">
      <el-button type='primary' @click="open">
        添加
      </el-button>
    </div>

    <!-- 表格 -->
    <el-table :data="tableData" border  class="table" :height="getHeight()" style="margin-left: 20px; width: 95%;" >
      <el-table-column type="index" label="序号" width="50" align="center" fixed>
      </el-table-column>
     
     
      <el-table-column prop="name" label="优惠券名称" width="400" align="center">
      </el-table-column>
      <el-table-column prop="id" label="优惠券ID" width="200" align="center">
      </el-table-column>
      <el-table-column  label="可使用商品" width="200" align="center">
        <template slot-scope="{row}">
          <div>
              {{ markGoods(row.id) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="优惠券面额" width="200" align="center">
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间" width="200" align="center">
      </el-table-column>
      <el-table-column prop="updated_at" label="更新时间" width="200" align="center">
      </el-table-column>
     

      <el-table-column label="操作" width="200" align="center" fixed="right">
        <template slot-scope="scope">
         
          <el-button type="text" size="small" @click="editRow(scope.row)">编辑</el-button>
          <el-button @click.native.prevent="deleteRow(scope.row)" type="text" size="small" class="delbtn" style="color: red;">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-row class="footer" style="margin: 20px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
        :page-sizes="[5, 10, 15, 20]" :page-size="limit" layout="total, sizes, prev, pager, next,jumper" :total="count">
      </el-pagination>
    </el-row>
    <!-- 对话框 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="form={}">
      <el-form :model="form" label-width='90px'>
        <el-form-item label="优惠券名称">
          <el-input v-model="form.name" placeholder="请输入优惠券名称"></el-input>
        </el-form-item>

        <el-form-item label="可使用商品"  v-show="isShow">
          <el-select v-model="form.goods_ids" placeholder="请选择可使用商品" @change="getGoodsDetail(form.goods_ids)" >
              <el-option v-for="item in goodsArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      
        <el-form-item label="优惠券面额">
          <el-input v-model="form.price" placeholder="请输入优惠券面额"></el-input>
        </el-form-item>

        <el-form-item label="优惠券ID" v-show="isShow" >
          <el-input v-model="form.id" readonly></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false; onSubmit()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
  
<script>
import {addCouponsInfo,delCouponsInfo,editCouponsInfo,getCouponsInfo,getGoodsInfo,getDetail,editGoods} from '@/api/goods'
export default {
  name: 'productCoupons',
  data() {
    return {
      tableData: [],
      page:1,
      limit:10,
      count:0,
      dialogFormVisible:false,
      form:{},
      goodsArr:[],
      title:'',
      isShow:false,
      goodsDetail:{}
    }
   
  },

  created(){
    this.getList()
  },

  methods: {
    getList(){
      getCouponsInfo({page:this.page,limit:this.limit}).then(res=>{
      //  console.log(res)
        if(res.code==1){
          this.tableData=res.data.list
          this.count=res.data.count
        }
      })
      getGoodsInfo({page:this.page,limit:100}).then(res=>{
          if(res.code==1){
            this.goodsArr=res.data.list
           // console.log(this.goodsArr)
          }
        })
  
    },

    markGoods(id){
  //   console.log(id)
    let res=  this.goodsArr.filter(item=>{
              return item.coupon_id==id
            })
         if(res.length){
          return res[0].name
         }else{
          return ""
         }
    },
    
    open(){
      this.title='添加优惠券'
      this.isShow=false
      this.dialogFormVisible=true
      },
      //获取选中的商品详情
      getGoodsDetail(id){
        this.goodsDetail={}
        getDetail({id}).then(res=>{
          this.goodsDetail=res.data
        //  console.log(this.goodsDetail)
        })
      },
      //数据回显
      editRow(row){
        this.title='编辑优惠券'
        this.dialogFormVisible=true
        this.isShow=true
        this.form={...row,goods_ids:this.markGoods(row.id)}
        
      },
      add(){
        //添加优惠券
        addCouponsInfo(this.form).then(res=>{
          if(res.code==1){
            this.$message.success('添加成功')
            this.getList()   
          }
        })

      },
      edit(){
        console.log({...this.goodsDetail,coupon_id:this.form.id})
        editGoods({...this.goodsDetail,coupon_id:this.form.id})
        editCouponsInfo(this.form).then(res=>{
          if(res.code==1){
            this.$message.success('编辑成功')
            this.getList()
          }
        })
      },

      onSubmit(){
        if(this.title=='添加优惠券'){
          this.add()
        }else{
          this.edit()
        }
      },

      deleteRow(row){
        delCouponsInfo(row).then(res=>{
          if(res.code==1){
            this.$message.success('删除成功')
            this.getList()
          }
        })
      },

    //改变每页多少条
    handleSizeChange(val) {
     this.limit = val
     this.getList()
    },
    //改变当前页
    handleCurrentChange(val) {
     this.page = val
     this.getList()
    },
    //获取表格高度
    getHeight() {
      return window.innerHeight - 350
    },


  }
}
</script>  
  
<style scoped>
.title {
  padding: 20px;
  border-bottom: 1px solid #ccc;
}

.btnBox {
  padding: 20px;
}
</style>
  